// 优惠券报表
<template>
    <div class="discountCoupon">
        <SearchBar class="form" @onSearch="handleSearch('search')" @childFn="resetForm">
            <SearchBarItem label="报表统计时间：">
              <DatePicker type="month" ref="clearDatePicker" :options="options3" v-model="searchData.time" transfer  @on-change="searchTime" style="width: 200px" placeholder="请选择年月"></DatePicker>
            </SearchBarItem>
        </SearchBar>

        <div v-if="!fromData.dataList">
          <Row class="noRepor" >
              <p>当前月份还未生成报表</p>
              <Button type="primary" @click="updataCoupon">点击生成</Button>
          </Row>
        </div>

        <div v-else>

          <Row class="handleBtn" >
            <Authc permissions="trade:settlement:cmb">
              <Button type="primary" @click="updataCoupon" :disabled="isDisabled">更新报表</Button>
            </Authc>
            <Authc permissions="trade:settlement:cmb">
              <Button type="primary" @click="getCouponExport">导出</Button>
            </Authc>
          </Row>

          <div class="reporCenter">
            <div class="reporBox">

              <Row>
                  <Row class="reporHeader">
                      <h3>优惠券报表</h3>
                      <div span="12">报表统计日期：{{ fromData.statisticsTime }}</div>
                      <div class="textRight" span="12">报表生成日期：{{ fromData.generationTime }}</div>
                  </Row>
                  <Table :columns="costColumn" :data="couponData" border></Table>
              </Row>
            </div>
          </div>
        </div>

    </div>
</template>

<script>
import { Button, DatePicker, Row, Col, Table, Input, Select, Option, Form, Message } from "view-design";
import Authc from "@/components/Authc";
import SearchBar from "@/components/SearchBar";
import { namespace } from "../Module/discountCouponModule";
import util from "@/utils/util";

export default {
    name: "",
    components: {
        SearchBar,
        SearchBarItem: SearchBar.SearchBarItem,
        DatePicker,
        Button,
        Row,
        Col,
        Table,
        Authc,
        Input,
        Select,
        Option,
        Message
    },
    data(){
        return {
          isDisabled: false,
          searchData: {}, /** 搜索 */
          options3: {
              disabledDate (date) {
                let nowTime = new Date()
                let month = nowTime.getMonth() + 1
                let year = nowTime.getFullYear()
                return date && date.valueOf() > new Date(`${year}-${month}`);
            }
          },
          /** 第一个表格配置 **/
          costColumn: [
              {
                  title: '场景',
                  key: 'orderSourceCn',
                  align: "center"
              },
              {
                  title: '优惠金额(￥)',
                  key: 'amount',
                  align: "center",
                  render: (h, params) => {
                    let item = params.row.amount ? params.row.amount / 100 : '0';
                    return h('span', util.toMoney(item));
                  },
              }
          ],
          /** 第一个表格数据 **/
          fromData: {},
          couponData: []
        }
    },
    created () {
      this.handleSearch('defined');
    },
    methods: {
      /** 导出 */
      async getCouponExport () {
        try {
          if (!this.searchData.year_month) {
            this.$Message.warning({
              content: '请选择报表时间'
            })
            return;
          }
          let params = {
            year_month: this.searchData.year_month
          }
          let res = await this.$store.dispatch(`${namespace}/couponExport`, params);

          util.exportExcle(res, `优惠券表${this.searchData.year_month}`);

        } catch (error) {
          this.$Message.error({
            content: '导出失败'
          })
        }
      },

      // 范围统计
      searchTime (date, type) {
        this.searchData.year_month = date;
      },

      /** 列表 -- 搜索 */
      async handleSearch(type) {
        try {
          var params = {}
          if (type === 'defined') {
            params = {
              year_month: util.getYearMonth()
            }
          } else if (type === 'search') {
            if (!this.searchData.year_month) {
              this.$Message.warning('请选择报表时间');
              return;
            }
          }
          let res = await this.$store.dispatch(`${namespace}/getCouponList`, { ...this.searchData, ...params });
          if (res.data.ret === 0) {
            if (type !== 'defined' && !res.data.data.dataList) {
              this.$Message.warning(`暂无${ this.searchData.year_month }报表`);
            }
            let data = res.data.data;
            this.fromData = data;
            this.couponData = data.dataList;
          }
        } catch (error) {
            this.$Message.error({
              content: error
            })
        }
      },
      /** 更新 -- 生成 */
      async updataCoupon(type) {
        try {
          if (!this.searchData.year_month) {
              this.$Message.warning('请选择报表时间');
              return;
            }
          this.isDisabled = true;
          let res = await this.$store.dispatch(`${namespace}/updataCouponList`, { ...this.searchData });
          if (res.data.ret === 0) {
            if (!res.data.data.dataList) {
              this.$Message.warning({
                content: `暂无${ this.searchData.year_month }报表`
              })
            } else {
              this.$Message.success({
                content: '更新成功'
              });
            }
            this.isDisabled = false;
            let data = res.data.data;
            this.fromData = data;
            this.couponData = data.dataList;

          }
        } catch (error) {
            this.$Message.error({
              content: error
            })
        }
      },
      resetForm() {
        this.$refs["clearDatePicker"].handleClear();
      }
    }
};
</script>

<style lang="less" scoped>
  .discountCoupon {
    padding: 10px;
    .noRepor {
      height: 500px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .form {
      background: #fff;
      padding: 10px;
    }
    .handleBtn {
      background: #fff;
      padding: 10px;
      margin-bottom: 10px;
    }

    .reporCenter {
      text-align: center;
    }

    .reporBox {
      text-align: center;
      margin: 0 auto;
      background: #fff;
      padding: 10px;
      width: 500px;
      .reporHeader {
        text-align: left;
        h3 {
          height: 50px;
          line-height: 50px;
          font-size: 32px;
          text-align: center;
          margin-bottom: 10px;
        }
      }
      .textRight {
        margin-bottom: 8px;
      }
    }
  }
</style>
